<template>
  <div>
    <el-dialog
      title="创建商品/编辑编辑"
      :visible.sync="visible" :show-close="false"
      style="margin-top: -10vh;"
      width="70%">
      <el-form ref="form" :model="form" label-width="80px">
        <!-- <el-row>
          <el-col class="form-part-title">
            商品类型
          </el-col>
        </el-row> -->
        <el-row>
          <el-col class="form-part-title">
            商品基本信息
          </el-col>
        </el-row>
        <el-form-item label="商品名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="分享描述">
          <el-input v-model="form.shareDesc"></el-input>
        </el-form-item>
        <el-form-item label="商品图">
          <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">商品详情页面上方滚动的图片，最多5张，且每张不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-row>
          <el-col class="form-part-title">
            价格库存
          </el-col>
        </el-row>
        <el-form-item label="商品规格">
          <template>
            <el-row class="guige-container">
              <!-- 规格名，规格值 -->
              <template>
                <el-row class="guige-inner" v-for="(item, gIndex) in new Array(productAttribute)" :key="gIndex">
                  <key-value :guigeItem="guigeItem"></key-value>
                </el-row>
              </template>
              <el-button size="small" @click="addSKUItem">添加规格项目</el-button>
            </el-row>
            <el-col class="self-tip">如有颜色、尺码等多种规格，请添加商品规格</el-col>
          </template>
        </el-form-item>
        <el-form-item label="价格">
          <el-select v-model="form.region" placeholder="请选择商品分类">
            <el-option label="五谷" value="wugu"></el-option>
            <el-option label="水果" value="shuiguo"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="商品分类">
          <el-select v-model="form.region" placeholder="请选择商品分类">
            <el-option label="五谷" value="wugu"></el-option>
            <el-option label="水果" value="shuiguo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input placeholder="请填写商品价格"></el-input>
        </el-form-item>
        <el-form-item label="划线价格">
          <el-input placeholder="请填写画线价"></el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input placeholder="请填写商品库存" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="商品颜色">
          <el-input placeholder="请填写商品颜色"></el-input>
        </el-form-item>
        <el-form-item label="商品尺寸">
          <el-input placeholder="请填写商品尺寸"></el-input>
        </el-form-item>
        <el-form-item label="快递费用">
          <el-input placeholder="请填写快递费用"></el-input>
        </el-form-item>
        <el-form-item label="是否限购">
          <el-input placeholder="请填写是否限购" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="商品编码">
          <el-input placeholder="请填写商品编码"></el-input>
        </el-form-item>
        <el-form-item label="成本价">
          <el-input placeholder="请填写成本价" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="是否抢购">
          <el-radio-group v-model="form.onSale">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCreateProductForm">取 消</el-button>
        <el-button type="primary" @click="closeCreateProductForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { _getCurrentGuigeItem } from '@/api/product'
import KeyValue from './keyvalue'
export default {
  mounted() {
    console.log(this.dialogVisible, 'props mounted')
  },
  methods: {
    // 让父组件关闭弹窗
    closeCreateProductForm() {
      this.$emit('visibleChanged', false)
    },
    // 添加规格
    addSKUItem() {
      this.productAttribute = this.productAttribute + 1
    },
    // 获取价格库存属性
    getCurrentGuigeItem() {
      this.loading = false
      // _getCurrentGuigeItem().then(res => {
      //   console.log(res)
      // }).catch(err => {
      //   console.log(err)
      // })
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: false
    }
  },
  components: {
    KeyValue
  },
  computed: {
    visible() {
      return this.dialogVisible
    }
  },
  data() {
    return {
      kIndex: 0, // 规格键名的初始值
      productAttribute: 0,
      loading: true,
      guigeItem: [
        {
          guigeitemkey: '手机',
          children: [
            {
              guigeitemvalue: 'MI'
            }
          ]
        },
        {
          guigeitemkey: '颜色',
          children: [
            {
              guigeitemvalue: '红色'
            }
          ]
        },
        {
          guigeitemkey: '服饰',
          children: [
            {
              guigeitemvalue: 'T恤'
            },
            {
              guigeitemvalue: '衬衫'
            },
            {
              guigeitemvalue: '短裤'
            },
            {
              guigeitemvalue: '长裤'
            }
          ]
        }
      ],
      guige_key1: '',
      guige_value1: '',
      // 上面是父组件传递过来的数据
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        onSale: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  }
}
</script>

<style scoped>
.form-part-title {
  margin-bottom: 20px;
  padding-left: 10px;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  background-color: #f8f8f8;
}
.guige-container {
  padding: 10px 0 10px 10px;
  border: 1px solid #ebebeb;
}
.guige-inner {
  margin-bottom: 20px;
}
.self-tip {
  font-size: 12px;
}
</style>